<template>
	<view class="content">
		<!-- 锦鲤算力卡 -->
		<NAVC title='锦鲤算力卡'></NAVC>
		<view class="banner">
			<view class="hashCards">
				锦鲤算力卡
			</view>
			<view class="num">数量 {{ }}</view>
			<view class="tips">每托管一台设备，消耗一张锦鲤算力卡</view>
		</view>
		<view class="recording">
			<view class="title">
				交易记录
			</view>
			<view class="item">
				<view class="dayItem">
					10月24日
				</view>
				<view class="hourList">
					<view class="hourItem">
						<view class="hours">
							{{'00:33'}}
						</view>
						<view class="types">

						</view>
						<view class="tradeVal">
							<span class="">

							</span>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="btn">
			<van-button @click="onClickOverlay">赠送好友</van-button>
			<van-button @click="onClickTransfer">立即托管</van-button>
		</view>
		<!-- 底部转出弹出 -->
		<van-popup class="contactUsPopup" v-model:show="show" position="bottom" :style="{ height: '65%' }">
			<view class="title">联系我们</view>
			<image @click="OffPopup" class="Off" src="../../static/images/equipment/btn_close-popup@2x.png" mode="">
			</image>
			<view class="line van-hairline--bottom"></view>
			<view class="submit">
				<van-button class="roll-out" @click="rollOut">确认转出</van-button>
			</view>
			<view class="content">
				<view class="titleNav">锦鲤卡类型</view>
				<button class="Buy_now"></button>
				<view class="titleNav">对方UID</view>
				<view class="container">
					<input type="text" class="ipt" v-model="Uid" />
					<van-icon class="icon" name="scan" />
				</view>
				<view class="titleNav">转出数量</view>
				<view class="container">
					<input type="text" class="ipt" v-model="num" />
					<view class="text">
						<text class="num">张</text>
						<text class="all">全部转出</text>
					</view>

				</view>
				<view class="number">剩余：334张</view>
				<view class="titleNav">安全密码</view>
				<view class="container">
					<input type="text" class="ipt" v-model="password" />
				</view>
				<view class="number" style="color: red;">忘记密码?</view>
			</view>
		</van-popup>
		<!-- 转出成功弹出框 -->
		<van-popup class="contactUsPopup" v-model:show="showSuccess" position="bottom" :style="{ height: '65%' }">
			<image @click="OffSuccess" class="Off" src="../../static/images/equipment/btn_close-popup@2x.png" mode="">
			</image>
			<view class="img">
				<image src="../../static/images/Shop/success.png" mode=""></image>
			</view>
			<view class="titleA">转出成功</view>
			<view class="textA">您本次成功转出锦鲤算力卡 10 张</view>
			<view class="btn" style="justify-content: center;">
				<van-button class="btnA">我知道了</van-button>
			</view>
		</van-popup>
		<!-- 转出成功弹出框 -->
		<van-popup class="contactUsPopup" v-model:show="Transfer" position="bottom" :style="{ height: '65%' }">
			<view class="title">转入</view>
			<image @click="OffEwm" class="Off" src="../../static/images/equipment/btn_close-popup@2x.png" mode="">
			</image>
			<view class="line van-hairline--bottom"></view>
			<view class="content contentA">
				<view class="titleTransfer">锦鲤卡类型</view>
				<view class="bgc">
					<view class="bgcTitle">
						fbqoawpv0f8q394t1324
						<image src="../../static/images/equipment/btn-copy.png" mode="" />
					</view>
					<view class="ewm">
						<image src="../../static/images/equipment/btn_close-popup.png" mode=""></image>
					</view>
					<button class="ewmBtn">保存到相册</button>
				</view>

			</view>
		</van-popup>
	</view>
</template>

<script lang="ts" setup>
	import NAVC from '@/components/equipmentC/navC/index.vue'
	import { ref } from 'vue'
	// 传出的弹框控制开关
	const show = ref(false);
	const onClickOverlay = () => {
		show.value = true
	};
	const OffPopup = () => {
		show.value = false
	}
	// uid
	const Uid = ref('')
	//转出数量
	const num = ref('')
	// 安全密码
	const password = ref('')


	// 转出成功是的控制开关
	const showSuccess = ref(false);

	const rollOut = () => {
		// 关闭转出的开关
		show.value = false
		// 打开转出成功的开关
		showSuccess.value = true
	}
	const OffSuccess = () => {
		showSuccess.value = false
	}


	const Transfer = ref(false)
	const onClickTransfer = () => {
		Transfer.value = true
	}
	const OffEwm = () => {
		Transfer.value = false
	}
</script>

<style lang="scss" scoped>
	.content {
		min-height: 100vh;

		.banner {
			width: 686px;
			height: 240px;
			margin: 0 auto;
			text-align: left;

			.hashCards {
				font-size: 60px;
				font-family: AliHYAiHei, AliHYAiHei;
				font-weight: normal;
				color: #FFFFFF;
				line-height: 59px;
				padding-top: 54px;
				padding-left: 48px;
			}

			.num {
				padding-left: 48px;
			}

			.tips {
				padding-left: 48px;
			}
		}
	}

	.number {
		width: 100%;
		text-align: right;
		font-size: 24px;
		font-family: MicrosoftYaHei;
		color: #FFFFFF;
		line-height: 31px;
		margin-top: 16px;

	}

	.titleNav {
		font-size: 24px;
		padding-top: 40px;
		color: #FFFFFF;
		padding-bottom: 16px;
	}

	.btn {
		width: 100vw;
		padding: 0 32px;
		box-sizing: border-box;
		height: 88px;
		display: flex;
		justify-content: space-between;

		&>:nth-child(1) {
			width: 47%;
			height: 88px;
			background: #00D0B9;
			border: none;
			border-radius: 16px;
			font-size: 28px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}

		&>:nth-child(2) {
			width: 47%;
			height: 88px;
			border: none;
			background: #4E47FF;
			border-radius: 16px;
			font-size: 28px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
	}

	.contactUsPopup {
		--van-popup-background: #222324;
		--van-popup-round-radius: 36px;
		--van-popup-close-icon-size: 36px;
		border-radius: 36px 36px 0 0;
		color: white;

		// ::v-deep.van-icon {
		// 	top: 32px;
		// 	right: 32px;
		// }

		.title {
			position: absolute;
			left: 50%;
			top: 21px;
			transform: translateX(-50%);
			font-size: 40px;
		}

		.img {
			display: flex;
			justify-content: center;

			image {
				width: 201px;
				height: 178px;
				margin: 130px 0;
			}
		}

		.titleA {
			font-size: 40px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			text-align: center;
			line-height: 40px;
		}

		.textA {
			font-size: 28px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 40px;
			text-align: center;
			margin-top: 32px;
			margin-bottom: 80px;
		}

		.btnA {
			width: 216px;
			height: 72px;
		}

		.Off {
			position: absolute;
			right: 3%;
			top: 21px;
			font-size: 40px;
			height: 72px;
			width: 72px;
		}

		.line {
			top: 96px;
			width: 90%;
			margin: 0 auto;
		}

		.submit {
			width: 750px;
			height: 112px;
			background: #121317;
			box-shadow: 0px -1px 0px 0px rgba(255, 255, 255, 0.3);
			position: absolute;
			bottom: 0%;
			left: 0;
			display: flex;
			justify-content: center;
			align-items: center;

			.roll-out {
				font-size: 28px;
				width: 280px;
				color: white;
				height: 80px;
				background: #00D0B9;
				border-radius: 16px;
				border: none;
			}
		}


		.content {
			height: calc(100% - 208px);
			overflow-y: scroll;
			width: 100%;
			padding: 0 30px 40px;
			box-sizing: border-box;
			margin-top: 96px;

			.titleTransfer {
				font-size: 32px;
				margin-top: 60px;
			}

			.bgc {
				margin: 16px auto 0;
				width: 600px;
				height: 550px;
				background: url('../../static/images/equipment/xinz.png');
				background-size: 100% 100%;

				.bgcTitle {
					height: 88px;
					width: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 24px;

					image {
						height: 30px;
						width: 30px;
						margin-left: 10px;
					}
				}

				.ewm {
					width: 250px;
					height: 250px;
					margin: 50px auto;

					image {
						height: 100%;
						width: 100%;
					}
				}

				.ewmBtn {
					width: 280px;
					height: 80px;
					line-height: 80px;
					background: #4E47FF;
					border-radius: 16px;
					font-size: 32px;
					color: white;
				}

			}

			.container {
				height: 88px;
				width: 100%;
				border: 2px solid rgba(255, 255, 255, 0.6);
				border-radius: 16px;
				padding: 0 26px;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.van-icon {
					// height: 32px;
					// width: 32px;
					font-size: 40px;
					color: white;
					padding-left: 20px;
					border-left: 1px solid #cccccc;
				}

				.ipt {
					flex: 1;
					background-color: transparent;
					color: white;
					height: 100%;
					font-size: 28px;
				}

				.text {
					// margin-right: 20px;
					font-size: 28px;

					.num {
						padding-right: 20px;
						border-right: 1px solid #cccccc;

					}

					.all {
						margin-left: 20px;
						color: #00D0B9;
					}
				}

			}

		}
	}

	@property --direc {
		syntax: '<angle>';
		inherits: false;
		initial-value: 0deg;
	}

	.Buy_now {
		margin: 0 !important;
		width: 200px;
		height: 88px;
		color: #fff;
		margin: 32px auto 80px auto;
		line-height: 88px;
		text-align: center;
		--direc: 0deg;
		background-image: linear-gradient(var(--direc), #99F5DA, #83AAE1, #6953E9, #A82DC0);
		animation: rotate 3s linear infinite;
		border-radius: 16px;
	}

	.Buy_now::before {
		content: '';
		position: absolute;
		inset: 4px;
		background-color: #000001;
		border-radius: inherit;
	}

	.Buy_now::after {
		content: '锦鲤算力卡';
		font-size: 45px;
		position: absolute;
		inset: 4px;
		z-index: 1;
		margin-top: 20px;
		/* background-color: #000001; */
	}

	@keyframes rotate {
		to {
			--direc: 360deg
		}
	}

	.contentA {
		height: calc(100% - 112px) !important;
		overflow-y: none;
	}
</style>